<template>
  <div class="container">
    <scroll-view scroll-y="true" style="height: 100vh;">
      <div class="mainContent">
         <div class="editsave"  @click="saveEdit">保存</div>
        <div class="singleUserMsg avatar">
          <div class="leftLabel">头像</div>
          <!-- <img v-if="userData.avatar" class="userAvatar" :src="userData.avatar" alt=""> -->
          <img class="userAvatar" src="/static/images/defaultAvatar.png" alt="">
        </div>
        <div class="singleUserMsg">
          <div class="leftLabel">账号类型</div>
          <div class="rightMsg">{{ userData.userType }}</div>
        </div>
        <div class="singleUserMsg">
          <div class="leftLabel">昵称</div>
          <div class="rightMsg">{{ userData.nickName || '--' }}</div>
        </div>
        <div class="singleUserMsg">
          <div class="leftLabel">姓名</div>
          <div class="rightMsg">{{ uName || '--' }}</div>
        </div>
         <div class="singleUserMsg">
          <div class="leftLabel">性别</div>
          <div class="rightMsg"><i>{{ sex || '请选择' }}</i><b class="rightMore"></b></div>
           <picker @change="handleSexPickerChange" :range="sexList" class="cityPicker">
            <view class="picker">
            </view>
          </picker>
        </div>
        <div class="singleUserMsg">
          <div class="leftLabel">城市</div>
          <div class="rightMsg" style="color:#999999">{{ choCityName || '--' }}</div>
          <!-- <picker
            mode="multiSelector"
            @change="handleCityChange"
            @columnchange="changeCityNextCol"
            :value="cityIndex"
            :range="cityArr"
            class="cityPicker"
          >
          <view class="picker">
          </view>
          </picker> -->
        </div>
        <div class="singleUserMsg">
          <div class="leftLabel">学校</div>
          <div class="rightMsg" style="color:#999999">{{ hasChoSchoolName || '--' }}</div>
          <!-- <picker @change="handleSchoolPickerChange" :range="schoolList" class="cityPicker">
            <view class="picker">
            </view>
          </picker> -->
        </div>
        <div class="singleUserMsg" v-if="myUserType==='班主任' || myUserType==='年级主任'">
          <div class="leftLabel">年级</div>
          <div class="rightMsg"><i>{{ grades || '请选择' }}</i><b class="rightMore"></b></div>
          <picker @change="handleGradePickerChange" :range="gradeList"  class="cityPicker">
            <view class="picker">           
            </view>
          </picker>
        </div>
        <div class="singleUserMsg" v-if="myUserType==='班主任'">
          <div class="leftLabel">班级</div>
          <div class="rightMsg"><i>{{ classes || '请选择' }}</i><b class="rightMore"></b></div>
            <picker @change="handleClassPickerChange" :range="classList"  class="cityPicker">
            <view class="picker">
            </view>
          </picker>
        </div>
      </div>
    </scroll-view> 
    <div class="logout" @click="handleExitLoginStatus">退出登录</div>
  </div>  
</template>

<script>
export default {
  data () {
    return {
      gradeList: ['高一', '高二', '高三'],
      sex: '',
      hasChoSchoolName: '',
      schoolList: [],
      sexList: ['男', '女'],
      choCityName: '',
      provinceid: '', // 省
      cityid: '', // 市
      areaid: '', // 区
      userData: {},
      uName: '',
      gradeAndClass: '--',
      cityIndex: [0, 0, 0], // 下标集合
      cityArr: [],
      classList: [],
      grades: '',
      classes: '',
      myUserType: ''
    }
  },
  mounted () {
    // this.getCascadeAreaList()
    this.getUserData()
    this.createClassNames()
  },
  methods: {
    saveEdit () {
      const teacherData = JSON.parse(wx.getStorageSync('teacherData'))
      let uid = teacherData.userVoId
      let users = this.userData
      users.userType === '教务主任' ? this.types = 6 : users.userType === '校长' ? this.types = 7 : users.userType === '年级主任' ? this.types = 5 : this.types = 3

      let obj = {
        'areaId': users.areaId,
        'avatar': '',
        'className': this.className,
        'gradeId': this.gradeId,
        'name': users.name,
        'nickName': users.nickName,
        'schoolId': users.schoolId,
        'uid': teacherData.userVoId,
        'userType': this.types,
        'sex': this.sexid
      }
      console.log('obj', obj)
      this.$httpWX.post({
        url: '/shengxueApi/thirdParty/user/updateUserInfoById',
        data: obj,
        header: {
          'content-type': 'application/json', // 默认值
          'accessToken': wx.getStorageSync('tokens')
        }
      }).then(res => {
        if (res.code == '0') {
          wx.showToast({
            title: '修改成功',
            icon: 'success'
          })
        } else {
          wx.showToast({
            title: '修改失败',
            icon: 'none'
          })
        }
      })
    },
    // 退出登录
    handleExitLoginStatus () {
      this.$httpWX.post({
        url: '/shengxueApi/identity/logout',
        header: {
          'content-type': 'application/json', // 默认值
          'Api-Version': '1.0.0',
          'accessToken': wx.getStorageSync('tokens')
        }
      }).then(res => {
        if (res.code === '0') {
          wx.showToast({
            title: res.message,
            icon: 'success',
            duration: 2000
          })
        } else {
          wx.showToast({
            title: '操作失败',
            icon: 'none'
          })
        }
      }).finally(() => {
        wx.clearStorage()
        wx.reLaunch({ url: '../index/main' })
      })
    },
    createClassNames () {
      let singleClassName = ''
      for (let i = 1; i < 101; i += 1) {
        singleClassName = i + '班'
        this.classList.push(singleClassName)
      }
    },
    handleClassPickerChange (e) {
      const index = e.target.value
      this.classes = this.classList[index]
      this.className = this.classList[index]
    },
    handleGradePickerChange (e) {
      const index = e.target.value
      this.grades = this.gradeList[index]
      this.gradeId = index * 1 + 1
    },
    handleSexPickerChange (e) {
      const index = e.target.value
      this.sex = this.sexList[index]
      this.sexid = index * 1 + 1
    },
    handleSchoolPickerChange (e) {
      const index = e.target.value
      this.hasChoSchoolName = this.schoolList[index]
      this.schoolid = this.areaSchoolList[index].schoolId
    },
    // 获取省市区数组
    getCascadeAreaList () {
      this.$httpWX
        .post({
          url: '/shengxueApi/area/getCascadeArea',
          header: {
            'content-type': 'application/json', // 默认值
            'Api-Version': '2.0.1'
          }
        })
        .then(res => {
          console.log('res: ', res)
          this.cascadeAreaList = res.data
          this.cityArr[0] = this.cascadeAreaList.map(v => {
            return v.lable
          })
          this.cityArr[1] = this.cascadeAreaList[this.cityIndex[0]].list.map(
            v => {
              return v.lable
            }
          )
          this.cityArr[2] = this.cascadeAreaList[this.cityIndex[0]].list[
            this.cityIndex[1]
          ].list.map(v => {
            return v.lable
          })
          this.cityArr = this.cityArr
          console.log('this.cityAr: ', this.cityArr)
          this.getUserData()
        })
    },
    changeCityNextCol (e) {
      this.cityIndex[e.target.column] = e.target.value
      // mulArr[0]的值是不会随用户操作变更的，因此不需要改变
      // mulArr[1]的值是由 mulIndex[0]的值决定的
      this.cityArr.splice(1, 1, this.cascadeAreaList[this.cityIndex[0]].list.map(v => {
        return v.lable
      })
      )
      // mulArr[2]的值是由 muIndex[1]的值决定的
      this.cityArr.splice(2, 1, this.cascadeAreaList[this.cityIndex[0]].list[this.cityIndex[1]].list.map(v => {
        return v.lable
      })
      )
    },
    // 选择省市区
    handleCityChange (e) {
      if (!this.isChangeChoCity) this.isChangeChoCity = true
      this.hasChoSchoolName = '请选择所在学校'
      this.cityIndex = e.target.value
      let cityName = ''
      // 获取省份ID
      let lineOne = this.cascadeAreaList[this.cityIndex[0]] // 省份这一列的选中数据
      this.provinceid = lineOne.id
      cityName += lineOne.lable
      // 获取城市ID
      let lineTwo = lineOne.list[this.cityIndex[1]] // 城市这一列的选中数据
      this.cityid = lineTwo.id
      cityName = cityName + ', ' + lineTwo.lable
      // 获取区域ID
      let lineThree = lineTwo.list[this.cityIndex[2]]
      this.areaid = lineThree.id
      cityName = cityName + ', ' + lineThree.lable
      this.choCityName = cityName
      this.getAreaSchoolList()
    },
    // 获取区域内学校的信息
    getAreaSchoolList () {
      this.$httpWX
        .get({
          url: '/shengxueApi/area/getSchoolsById/' + this.areaid,
          header: {
            'content-type': 'application/json', // 默认值
            'Api-Version': '2.0.1'
          }
        })
        .then(res => {
          this.areaSchoolList = res.data
          const arr = []
          for (const item of res.data) {
            arr.push(item.schoolName)
          }
          this.schoolList = arr
        })
    },
    getUserData () {
      const data = JSON.parse(wx.getStorageSync('teacherData'))
      this.uName = data.name
      this.$httpWX.post({
        url: '/shengxueApi/thirdParty/user/getTeacherUserInfoById',
        data: {
          uid: data.userVoId
        },
        header: {
          'content-type': 'application/json', // 默认值
          'Api-Version': '2.0.1',
          'accessToken': wx.getStorageSync('tokens')
        }
      }).then(res => {
        this.userData = res.data
        this.choCityName = res.data.area
        this.hasChoSchoolName = res.data.school
        this.gradeId = res.data.gradeId
        this.grades = res.data.grade
        this.className = res.data.className
        this.classes = res.data.className
        this.myUserType = res.data.userType
        this.sex = res.data.userSex
        this.sex === '男' ? this.sexid = 1 : this.sex === '女' ? this.sexid = 2 : this.sexid = 0
        this.gradeAndClass = res.data.grade ? (res.data.grade + res.data.className) : '--'
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .mainContent {
    .editsave{
      height: 100rpx;
      padding: 0 30rpx;
      box-sizing: border-box;
      text-align: right;
      font-weight: 600;
      font-size: 30rpx;
      line-height: 100rpx;
    }

    .singleUserMsg {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      height: 100rpx;
      border-bottom: 1rpx solid #E5E5E5;
      padding: 0 53rpx 0 50rpx;
      box-sizing: border-box;
      position: relative;
      .rightMore {
        width: 32rpx;
        height: 32rpx;
        background: url('https://static.shengxue985.com/sxzx_miniprogram/teacher/css_sprites.png') -1170rpx -2011rpx;
        background-size: 746rpx 350rpx;
      }
      .leftLabel {
        color: #000;
        font-size: 28rpx;
        font-weight: bold;
      }
      .userAvatar {
        width: 96rpx;
        height: 96rpx;
        border-radius: 50%;
      }
      .rightMsg {
         color: #252525;
        font-size: 28rpx;
        font-weight: bold;
        i,b{
          display: inline-block;
          color: #252525;
        }
        i{
          margin-right: 10rpx;
        }
      }
      .cityPicker{
        width: 100%;
        height: 100%;
        position: absolute;
        // background: yellow;
        opacity: 0;
        left: 0;
        top: 0;
        .picker{
          width: 100%;
          height: 100rpx;
        }
      }
    }
    .avatar {
      height: 150rpx;
      padding-right: 31rpx;
    }
  }
  .logout{
    position: fixed;
    left: 0;
    bottom: 0;
    width:750rpx;
    height:112rpx;
    background:rgba(255,255,255,0.49);
    box-shadow:0px 3rpx 30rpx 2rpx rgba(204,204,204,0.75);
    text-align: center;
    line-height: 112rpx;
    font-size:30rpx;
    font-weight:500;
    color:rgba(255,169,0,1);
  }
</style>
